<template>
  <div class="container__auto">
    <div class="laber_box">

      <label class="checkbox-wrap">
        <span class="checkbox-inner">
          <span class="isChek" :class="{ Agree: mainStore.automatic }">
            <span class="iconfont icon-xuanzhong Gouselect"></span>
          </span>
          <input type="checkbox" class="checkbox-val" @change="isAutomatic" />
        </span> 
        <div class="labelTxt">3天内自动登录</div>
      </label>
      
    </div>

    <!-- <div class="laber_box">
      <label class="agreement">
        <span class="checkbox-inner">
          <span class="isChek" :class="{ Agree: mainStore.agreement }">
            <span class="iconfont icon-xuanzhong Gouselect"></span>
          </span>
          <input type="checkbox" class="checkbox-val" @change="isAgreement" />
        </span>
        <div class="labelTxt">
          <span>阅读并同意</span>
          <a href="javascript:;" class="color_155">用户协议</a>
          <span>、</span>
          <a href="javascript:;" class="color_155">隐私声明</a>
        </div>
      </label>
    </div> -->
  </div>
</template>

<script setup>
  import { useMainStore } from '@/stores/useMain';
  const mainStore = useMainStore();

  const isAutomatic = (event) => {
    const target = event.target;
    if (target) mainStore.automatic = target.checked;
  };

  const isAgreement = (event) => {
    const target = event.target;
    if (target) mainStore.agreement = target.checked;
  };
</script>

<style scoped lang="scss">
  .container__auto {
    margin-top: 68px;
    color: #333333;
    margin-bottom: 20px;

    .checkbox-wrap {
      margin-right: 24px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
    }

    .agreement {
      margin-top: 16px;
      margin-bottom: 16px;
      margin-right: 24px;
      display: inline-flex;
      align-items: center;
    }

    .checkbox-inner {
      width: 16px;
      height: 16px;
      position: relative;

      .isChek {
        width: 16px;
        height: 16px;
        border: 1px solid #ccc;
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        overflow: hidden;

        .Gouselect {
          font-size: 12px;
          font-weight: bold;
          color: #fff;
        }
      }

      .Agree {
        background-color: $color_155 !important;
        border: 1px solid $color_155 !important;
      }

      .checkbox-val {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        z-index: 10;
        opacity: 0;
        box-sizing: border-box;
        cursor: pointer;
      }
    }

    .labelTxt {
      font-size: 14px;
      color: #333333;
      margin-left: 8px;
      user-select: none;
      display: inline-block;
      cursor: pointer;
    }
  }
</style>
